<template>
  <div class="app-page">
    <div class="app-main">
      <header class="app-head">
        <h1>{{ curdata.title }}</h1>
        <div class="user">
          <p class="userImg"><img :src="curdata.thumb" /></p>
          <div class="userInfo">
            <p class="tel">{{ curdata.tel}}</p>
            <p class="time">发表于 {{ curdata.publishDate}}</p>
          </div>
        </div>       
        <div class="enjoy">
          <p>体验项目：{{ curdata.expproject }}</p>
          <p>体验门店：{{ curdata.store==null ? '' : curdata.store }}</p>
        </div>
      </header>
      <div class="content" v-html="curdata.content"></div>
      <a href="javascript:;" v-if="!isShowShareBtn&&isApp" class="shareGuide" @click="share"></a>
    </div>
    <div v-if="!isApp" class="download-banner">
        <a :href="downloadUrl">
          <p>车享家APP</p>
          <p>更多优秀评测、养车知识等着你</p>
          <span>前往</span>
       </a>
     </div> 
  </div>
  
</template>

<style lang="scss" scope>
@import '../../../assets/css/common.scss';

body{background:#edf0f5;margin:0 auto}
img{max-width:100%}
.app-page{
  .app-head{margin-bottom:rem(5);background:$_fff;padding:rem(15) rem(10) rem(20);border-bottom:1px solid #dddedf;
    h1{font-size:rem(23);color:#282828;margin-bottom:rem(30);}
    .user{display:table;margin-bottom:rem(22);
      .userImg{width:rem(36);float:left;margin-right:rem(12.5);border-radius:50%;
        img{with:rem(36);height:rem(36);border-radius:50%;}
      }
      .userInfo{display:table-cell;vertical-align:middle;font-size:rem(13);line-height:1.5;
        .tel{color:#404040;}
        .time{color:#bbb;}
      }
    }
    .enjoy{line-height:1.8;
      p{font-size:rem(15);color:#282828;}
    }    
  }
  .content{padding:rem(10);background:$_fff;}
  .shareGuide{
       width:rem(50);
        height:rem(50);
        line-height:rem(50);
        text-align:center;
        color:$_fff;
        background:transparent url("../../../assets/image/publicTest/share-icon.png") no-repeat top left;
        background-size:100% 100%;
        position:fixed;
        right:rem(5);
        top:50%;
        z-index:3;
    }
}
.download-banner{
  width:100%;
  background-color:#fff;
  height:rem(59);
  padding:rem(7) rem(10);
  position:fixed;
  bottom:0;
  left:0;
  -webkit-box-shadow:10px 10px 10px 10px #999;  
  -moz-box-shadow:10px 10px 10px 10px #999;  
  box-shadow:10px 10px 10px 10px #999;   
  a{
     display:block;
     background:transparent url(../../../assets/image/publicTest/cxj-icon.png) no-repeat left center;
     height:rem(35);
     line-height:rem(17);
     background-size:rem(35) rem(35);
     font-size:rem(14);
     padding-left:rem(45);
     color:#108ee9;
     margin-top:rem(5);
     span{
       display:inline-block;
       width:rem(85);
       height:rem(30);
       border:1px solid #108ee9;
       border-radius:rem(5);
       text-align:center;
       line-height:rem(30);
       position:absolute;
       right:rem(10);
       top:rem(15);
     }
  }
}
</style>

<script>
import common from "../../../assets/js/common.js";
import {Toast} from 'mint-ui';
export default {
  data (){
    return {
      getDateUrl:common.isdev() + '/zhongce/content.htm',
      curdata:{},
      shareObj:{},
      signUrl:process.env.NODE_ENV == 'sit' ? common.isEnv("//recruit") : common.isEnv("//wx")  ,
      curId:0,
      isShowShareBtn:common.checkAppversionIsGt35(),
      isApp:common.isApp(),
      downloadUrl:'//cxb.chexiang.com/service/version/getLatestAppVersion/0?channel=cx_cxj_xzy_0628_zc'
    }
  },
  created(){
    var e = this, id = common.getQueryString('id');
 
    e.getDateUrl = e.getDateUrl + '?id=' + id;

    e.$http.get(e.getDateUrl).then(res=>{
      var data = res.body, msg = data.msg;   
      if (data.errorCode == '1') {
         e.curdata = data.obj;       
         window.document.title =  e.curdata.title; 

        //分享数据配置
        e.shareObj = {
          friend: {
            title: e.curdata.title,
            desc: "商品到底靠不靠谱？【众测达人】带你走向事实真相！",
            link: window.location.protocol + "//" + window.location.host + window.location.pathname + '?id='+ id +'&utm_source=share',
            imgUrl: "https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/zs.png"
          },
          friendQuan: {
            title:"",
            desc:e.curdata.title,
            link: window.location.protocol + "//" + window.location.host + window.location.pathname + '?id='+ id +'&?utm_source=share',
            imgUrl: "https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/zs.png"
          }
        };
        //分享判断渠道
        if(!common.isApp()){ 
          common.wxShare(e);
        }else{
          if(e.isShowShareBtn){
            e.share(); 
          }
        }
      }else Toast(msg);
    },(err)=>{
      Toast("网络异常");
    });
  },
  mounted(){
  },
  methods:{
    //分享
    share() {
      var e = this;
      common.appShare(e);
    }

  }
}


</script>
